﻿<div id="maincontent">
    <div class="heading">
        <h1 id='statusInfo'><?= $info ?></h1>
    </div>
    <div class="tabs"><a tab="#tab_general">Thông tin</a><a tab="#tab_image">Ảnh</a></div>
    <div id="tab_general" class='page'>
        <table class="form">
            <tr >
                <td class="label">Tên:</td>
                <td><input type='text' id='name' value='<?= $name ?>'></td>
            </tr>
            <tr>
                <td class="label">Mô tả</td>
                <td>
                    <textarea name="description" id="description"><?= $description ?></textarea>
                    <script type="text/javascript">
                        //<![CDATA[

                        var editor = CKEDITOR.replace( 'description',{
                            skin : 'kama',
                            filebrowserBrowseUrl : '<?= base_url() ?>js/ckeditor/ckfinder/ckfinder.html',
                            filebrowserImageBrowseUrl : '<?= base_url() ?>js/ckeditor/ckfinder/ckfinder.html?type=Images',
                            filebrowserImageUploadUrl : '<?= base_url() ?>js/ckeditor/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Images',
                            filebrowserFlashUploadUrl : '<?= base_url() ?>js/ckeditor/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Flash'
                        });
                        //]]>
                    </script>
                    <?php
                    //echo $editor->replace('description');
                    ?>
                </td>
            </tr>
            <tr>
                <td class="label">Hiển thị ở slide top</td>
                <td>
                    <input name='show_top' id='show_top' type="checkbox" <?php if ($show_top)
                        echo 'checked'; ?>>
                </td>
            </tr>
	    <tr>
                <td class="label">Hiển thị ở slide chính</td>
                <td>
                    <input name='show_slide' id='show_slide' type="checkbox" <?php if ($show_slide)
                        echo 'checked'; ?>>
                </td>
            </tr>
            <tr>
                <td></td>
                <td>
                    <a onclick="saveInfo();" class="button">
                        <span class="button_left button_save"></span>
                        <span class="button_middle">Cập nhật</span>
                        <span class="button_right"></span>

                    </a>
                    <a onclick="history.go(-1);" class="button">
                        <span class="button_left button_cancel"></span>
                        <span class="button_middle">Bỏ qua</span>
                        <span class="button_right"></span>
                    </a>
                </td>
            </tr>
        </table>
    </div>
    <div id="tab_image" class='page'>
        <table class="form">
            <tr>
                <td class="label">Photo(s) of Gallery</td>
                <td>
                    <div id="file-uploaded" >
                        <?php
                        foreach ($photos as $photo) {
                            ?>
                            <div class="image-uploaded" style="width:100%">
                                <img style="float: left;" height="100" src="<?= base_url() . 'uploads/' . basename($photo->path) ?>">
                                <span class="cancel" rel="<?= $photo->id ?>" onclick="removeImage(this)">&nbsp;</span>
                                <div style="float:right;margin-left: 10px; width: 60%;">
                                    <p>File:&nbsp; <b><?= basename($photo->path) ?></b></p>
                                    
                                    <table >
                                        <tr>
                                            <td></td>
                                            <td><input type="hidden" class='idImage' value="<?= $photo->id ?>" /></td>
                                        </tr>
                                        <tr>
                                            <td>Name</td>
                                            <td><input type="text" class='nameImage' value="<?= $photo->name ?>" /></td>
                                        </tr>
                                        <tr>
                                            <td>Description</td>
                                            <td><textarea rows="2" class='descriptionImage'><?= $photo->description ?></textarea></td>
                                        </tr>
					 <tr>
                                            <td>Date Created</td>
                                            <td><textarea rows="2" class='descriptionImage'><?= date('d-m-y',$photo->date_created) ?></textarea></td>
                                        </tr>
                                    </table>
                                </div>
                                <div style="clear: both;"></div>
                            </div>
                            <?php
                        }
                        ?>
                    </div>

                    <div id="swfupload-control">
                        <input type="button" id="buttonUpload" />
                        <p id="queuestatus" ></p>
                        <ol id="log"></ol>
                    </div>

                    <a class="button" onclick="$('#swfupload-control').swfupload('startUpload');">
                        <span class="button_left button_backup"></span>
                        <span class="button_middle">Upload</span>
                        <span class="button_right"></span>
                    </a>
                </td>
            </tr>
            <tr>
                <td></td>
                <td>
                    <a onclick="saveInfo();" class="button">
                        <span class="button_left button_save"></span>
                        <span class="button_middle">Save</span>
                        <span class="button_right"></span>

                    </a>
                    <a onclick="history.go(-1);" class="button">
                        <span class="button_left button_cancel"></span>
                        <span class="button_middle">Cancel</span>
                        <span class="button_right"></span>
                    </a>
                </td>
            </tr>
        </table>
    </div>
</div>

<script type="text/javascript" src="<?php echo base_url() ?>js/swfupload/swfupload.js"></script>
<script type="text/javascript" src="<?php echo base_url() ?>js/jquery.swfupload.js"></script>
<script type="text/javascript" src="<?php echo base_url() ?>js/jquery.string.js"></script>

<script type='text/javascript'>
    var images = new Array();    
    // ask the user to confirm the window closing
    
    //Upload image
    $(function(){
        $('#swfupload-control').swfupload({
            upload_url: "<?= base_url().'admin/ajax/upload' ?>",
            file_post_name: 'imageFile',
            file_size_limit : 20000000, //20MB
            post_params:{
                'PHPSESSID': '<?= $PHPSESSID ?>'
            },
            file_types : "*.jpg;*.png;*.gif",
            file_types_description : "Image files",
            file_upload_limit : 50 ,
            flash_url : "<?php echo base_url() ?>js/swfupload/swfupload.swf",
            button_image_url : '<?php echo base_url() ?>js/swfupload/wdp_buttons_upload_114x29.png',
            button_width : 114,
            button_height : 29,
            button_placeholder : $('#buttonUpload')[0],
            debug: false
        })
        .bind('fileQueued', function(event, file){
            var listitem='<li id="'+file.id+'" >'+
                'File: <em>'+file.name+'</em> ('+Math.round(file.size/1024)+' KB) <span class="progressvalue" ></span>'+
                '<div class="progressbar" ><div class="progress" ></div></div>'+
                '<p class="status" >Waiting for uploading ...</p>'+
                '<span class="cancel" >&nbsp;</span>'+
                '</li>';
            $('#log').append(listitem);
            $('li#'+file.id+' .cancel').bind('click', function(){
                var swfu = $.swfupload.getInstance('#swfupload-control');
                swfu.cancelUpload(file.id);
                $('li#'+file.id).slideUp('fast');
            });
            // start the upload since it's queued
            //$(this).swfupload('startUpload');
        })
        .bind('fileQueueError', function(event, file, errorCode, message){
            alert('File size not allow ('+file.name+')');
        })
        .bind('uploadStart', function(event, file){
            $('#log li#'+file.id).find('p.status').text('Uploading...');
            $('#log li#'+file.id).find('span.progressvalue').text('0%');
            $('#log li#'+file.id).find('span.cancel').hide();
        })
        .bind('uploadProgress', function(event, file, bytesLoaded){
            //Show Progress
            var percentage=Math.round((bytesLoaded/file.size)*100);
            $('#log li#'+file.id).find('div.progress').css('width', percentage+'%');
            $('#log li#'+file.id).find('span.progressvalue').text(percentage+'%');
        })
        .bind('uploadSuccess', function(event, file, serverData){
           
            var item=$('#log li#'+file.id);
            //alert(serverData);
            //Xử lý với respond, append vào biến
            if(!$.string(serverData).startsWith('error')){
                images.push(serverData);                                                    
                thumbPath = '<?= base_url() ?>'+'uploads/'+serverData;
                //alert(images.length);
                var thumbImage = '<div class="image-uploaded" style="width:100%"><img style="float: left;" height="100" src="'+thumbPath+'"><span class="cancel" rel="" onclick="removeImage(this)">&nbsp;</span><div style="float:right;margin-left: 10px; width: 60%;"><p>File:&nbsp; '+serverData+'</p><table><tr><td></td><td><input type="hidden" class="idImage" value="" /></td></tr><tr><td>Name</td><td><input type="text" value="name" class="nameImage"></td></tr><tr><td>Description</td><td><textarea rows="2" class="descriptionImage">Description</textarea></td></tr></table></div><div style="clear: both;"></div></div>';
                $('#file-uploaded').append(thumbImage);
                item.slideUp();
                //alert("complete1111");
            }else{
                
                alert("Can't upload "+file.name+' file');
                item.find('div.progress').css('width', '0%');
                item.find('span.progressvalue').text('0%');
                item.find('p.status').text('Canceled!')
                return;
            }
        })
        .bind('uploadComplete', function(event, file){
            // upload has completed, try the next one in the queue
            //alert("complete");
            $(this).swfupload('startUpload');
        })
		
    });

    function removeImage(element){
        $(element).parent().remove();
        photoId = $(element).attr("rel");
        $.ajax({
            url: '<?= base_url() . 'admin/managegallery/' ?>deletePhoto/'+photoId+'/<?= $id ?>'
        });
    }
        
    function removeImageUploaded(element) {
        $(element).parent().remove();
        serverDataThisImage = $(element).attr("rel");
        
        for(var i=0, lengthImages = images.length; i< lengthImages;i++ )
        {
            if(images[i] == serverDataThisImage)
                images.splice(i, 1);
        }
    }
    
    var name = $('#name').val();
    var description = CKEDITOR.instances.description.getData();
    var idImage = new Array();
    var descriptionImage = new Array();
    var nameImage = new Array();
    var titleImage = new Array();
    var priceImage = new Array();
    var idImage = new Array();
    
    
    function saveInfo(){	 	
        //if(images.length == 0){
        //window.location.href = '<?= base_url() . 'admin/managegallery' ?>';
        //return;
        //}	
        
        //alert(images.length);
        name = $('#name').val();
        description = CKEDITOR.instances.description.getData();
        descriptionImage = new Array();
        nameImage = new Array();
        titleImage = new Array();
        priceImage = new Array();
        idImage = new Array();
	
        $('.idImage').each(function(){
            idImage.push(this.value);
        });
        
        $('.descriptionImage').each(function(){
            descriptionImage.push(this.value);
        });
        $('.nameImage').each(function(){
            nameImage.push(this.value);
        });
        $('.titleImage').each(function(){
            titleImage.push(this.value);
        });
        $('.priceImage').each(function(){
            priceImage.push(this.value);
        });
        if($('#show_top').is(':checked'))
            show_top = 1;
        else show_top = 0;
	if($('#show_slide').is(':checked'))
            show_slide = 1;
        else show_slide = 0;
	
        //alert(nameImage);
        $.ajax({
            type: 'POST',
            url:'<?= base_url() ?>'+'admin/managegallery/update/'+'<?= $id ?>',
            data: ({
                'imageids' : idImage,
                'name': name,
                'desc': description,
                'show_top': show_top,
		'show_slide': show_slide,
		
                'images': images,
                'imagedess' : descriptionImage,
                'imagenames': nameImage,
                'imagetitles': titleImage,
                'imageprices': priceImage,
                'update': 'Update'
            }),
            success: function(respond){   
                //alert(respond);
                if(respond == 'success'){
                    location.href = '<?php echo base_url() . 'admin/managegallery'; ?>';
                }else{	
                    alert(respond);
                }
            }
        });
    }

</script>
<script type="text/javascript">
    $.tabs('.tabs a');
</script>